<template>
    <div>
        <ul class="list">
            <li class="item"
                v-for="(item,index) in letters"
                :key="index"
                :ref="item"
                @click="handleLetterClick"
                @touchstart.prevent="handleTouchStart"
                @touchmove="handleTouchMove"
                @touchend="handleTouchEnd"
                >{{item}}</li>
        </ul>
    </div>
</template>
<script>
    export default {
        name: 'cityAlphabet',
        props:{
            cities:Object
        },
        computed:{
          letters(){
              const letters=[];
              for(let i in this.cities){
                  letters.push(i);
              }
              return letters;
          }
        },
        data(){
          return {
             touchStatus:false,
             startY:0,
             timer:null
          }
        },
        updated(){
           this.startY=this.$refs['A'][0].offsetTop
        },
        methods:{
            handleLetterClick(e){
               this.$emit('change',e.target.innerText);
            },
            handleTouchStart(){
               this.touchStatus=true;
            },
            handleTouchMove(e){
               if(this.touchStatus){
                  if(this.timer){
                    //减少handleTouchMove的执行频率
                     clearTimeout(this.timer);
                  }
                  this.timer=setTimeout(()=>{
                      const touchY= e.touches[0].clientY-79;
                      //inde为ABCD等的下标
                      const index=Math.floor((touchY-this.startY)/20);
                      if(index>=0&&index<this.letters.length){
                          this.$emit('change',this.letters[index]);
                      }
                  },16);
               }
            },
            handleTouchEnd(){
               this.touchStatus=false;
            }
        }
    }
</script>
<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
    .list
      position:absolute
      top:1.58rem
      right:0
      bottom:0
      width:.4rem
      display:flex
      flex-direction:column
      justify-content:center
      .item
        text-align:center
        line-height:.4rem
        color:$bgColor
</style>